<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgList">
        <a :href="item.linkPath">
          <img v-bind:src="item.imageUrl" alt="">
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>
<style src="../assets/swiper.min.css"></style>
<script>
//    import {urlList} from '../assets/urlList.js'//引入接口地址文件
    import Swiper from 'swiper'
    function GetQueryString(name)
    {
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
      var r = decodeURI(window.location.search.substr(1)).match(reg);
      if(r!=null)return  unescape(r[2]); return null;
    }

    let channelNum = GetQueryString("channelNum")
    if(!channelNum){
      channelNum = 0
    }

  function getCookie(cname)
  {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++)
    {
      var c = ca[i].trim();
      if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
  }
  let auth = getCookie('USER_P2P_H5_COOKIE');//获取cookie
  let params = new URLSearchParams()
  params.append('auth',auth)

//    let api = 'https://bird.ioliu.cn/v1/?url=';
    export default {
        name: "swiper",
        data() {
          return {
            imgList:[]
          }
        },
      methods:{
        post:function() {
          let _this = this;
          this.$ajax({
            method:'post',
            url:'/api/homepage/banners.html?channelNum='+channelNum,
            data:params
          }).then(function(res) {
             console.log('banner图',res);
            _this.imgList=res.data.banners;
          }),function(res) {
            console.log('错误'+res)
          }
        }
      },
      mounted() {
          var swiper = new Swiper('.swiper-container',{
            loop:true,
            autoplay:{
              disableOnInteraction: false
            },
            pagination: {
              el: '.swiper-pagination',
            },
          })
          this.post();

      }
    }
</script>

<style >
  .swiper-pagination-bullet{
    width: 10px !important;
    height: 2px !important;
    border-radius: 0 !important;
    margin: 0 2px !important;
  }
  .swiper-pagination-bullet-active{
    background: #DE6049 !important;
  }
</style>
